<template>
  <!-- 物联网库存 -->
  <div class="outbound">
    <div class="card-search">
      <el-form
        size="small"
        :inline="true"
        :model="createform"
        class="demo-form-inline"
      >
        <el-form-item label="产品类型" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.Mold"
            @blur="getdata"
            placeholder="请选择产品类型"
            style="width: 150px"
          >
            <el-option
              v-for="(item, index) in MoldData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工艺" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.Craft"
            placeholder="请选择工艺"
            style="width: 150px"
          >
            <el-option
              v-for="(item, index) in CraftData1"
              :key="index"
              :label="item.dates"
              :value="item.dates"
              :index="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号" prop="name">
          <el-select
            style="width: 150px"
            filterable
            clearable
            v-model="createform.WhatModel"
            placeholder="请选择型号"
          >
            <el-option
              v-for="(item, index) in WhatModelData1"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直径" prop="name">
          <el-select
            style="width: 160px"
            filterable
            clearable
            v-model="createform.Diameter"
            placeholder="请选择直径"
          >
            <el-option
              v-for="(item, index) in DiameterData1"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="正次品" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.GoodOrBad"
            placeholder="请选择正次品"
            style="width: 150px"
          >
            <el-option
              v-for="(item, index) in GoodOrBadData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否外协" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.Outside"
            placeholder="请选择是否外协"
            style="width: 150px"
          >
            <el-option
              v-for="(item, index) in OutsideData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" ">
          <el-button icon="el-icon-close" type="primary" @click="qingkong()"
            >清空</el-button
          >
          <el-button icon="el-icon-search" type="primary" @click="onSubmit()"
            >查询</el-button
          >
          <el-button
            icon="el-icon-refresh"
            type="primary"
            plain
            @click="dialogVisible = true"
            >增加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="card-table">
      <el-table
        :header-cell-style="getRowClass"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="width">
        </el-table-column>
        <el-table-column align="center" label="产品类型" width="width">
          <template slot-scope="{ row }">
            {{ row.mold }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工艺" width="width">
          <template slot-scope="{ row }">
            {{ row.craft }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="所属库管" width="width">
          <template slot-scope="{ row }">
            {{ row.controller }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="长度" width="width">
          <template slot-scope="{ row }">
            {{ row.length }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="型号" width="width">
          <template slot-scope="{ row }">
            {{ row.whatModel }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="正次品" width="width">
          <template slot-scope="{ row }">
            {{ row.goodOrBad }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否外协" width="width">
          <template slot-scope="{ row }">
            {{ row.outside }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="直径" width="width">
          <template slot-scope="{ row }">
            {{ row.diameter }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="单重" width="width">
          <template slot-scope="{ row }">
            {{ row.weight }}
          </template>
        </el-table-column> -->

        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button
              style="margin-left: 0"
              @click="deleteOne(row)"
              type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagin" v-if="total >= pageSize">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :modal-append-to-body="false"
      title="添加库存"
      :visible.sync="dialogVisible"
      width="26%"
      :rules="createformRuls"
    >
      <el-form
        size="small"
        ref="createform"
        :model="createform"
        label-width="80px"
      >
        <el-form-item label="工艺" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.Craft"
            y
            placeholder="请选择工艺"
          >
            <el-option
              v-for="(item, index) in CraftData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品类型" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.Mold"
            placeholder="请选择产品类型"
          >
            <el-option
              v-for="(item, index) in MoldData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.WhatModel"
            placeholder="请选择型号"
          >
            <el-option
              v-for="(item, index) in WhatModelData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="长度" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.Length"
            placeholder="请选择长度"
          >
            <el-option
              v-for="(item, index) in LengthData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="直径" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.Diameter"
            placeholder="请选择直径"
          >
            <el-option
              v-for="(item, index) in DiameterData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否外协" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.Outside"
            placeholder="请选择是否外协"
          >
            <el-option
              v-for="(item, index) in OutsideData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="正次品" prop="name">
          <el-select
            filterable
            clearable
            v-model="createform.GoodOrBad"
            placeholder="请选择正次品"
          >
            <el-option
              v-for="(item, index) in GoodOrBadData"
              :key="index"
              :label="item.dates"
              :value="item.dates"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="单重" prop="Weight">
          <el-input v-model="createform.Weight" style="width: 215px" placeholder="请输入小数或整数"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="postinfo()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  LinkagegetAll,
  totalListgettypeAll,
  totalListcreate,
  DiametergetAll,
  OutsidegetAll,
  GoodOrBadgetAll,
  CraftgetAll,
  LengthgetAll,
  WhatModelgetAll,
  MoldgetAll,
  totalListdeleteType,
} from "@/api/stock/totalListWorkOrder.js";

export default {
  name: "cruciblesContent",
  components: {},
  data() {
    return {
      createform: {
        Diameter: "",
        Outside: "",
        GoodOrBad: "",
        Craft: "",
        Length: "",
        WhatModel: "",
        Mold: "",
        Controller: "",
      },
      DiameterData1: [],
      CraftData1: [],
      WhatModelData1: [],
      // 获取直径数据
      DiameterData: [],
      //获取是否外协
      OutsideData: [],
      //获取正次品数据
      GoodOrBadData: [],
      // 获取工艺数据
      CraftData: [],
      // 获取长度数据
      LengthData: [],
      // 获取型号数据
      WhatModelData: [],
      // 获取产品类型数据
      pageSize: 10,
      currPage: 1,
      total: null,
      MoldData: [],
      specifications: [],
      suppliers: [],
      dialogVisible: false,
      tableData: [],
      createformRuls: {
        // Weight: [{ required: true, message: '单重不能为空', trigger: 'blur' },
        // { pattern: "^[0-9]+([.]{1}[0-9]+){0,1}$", message: "请输入整数或者小数" }]
      },
    };
  },
  computed: {},

  watch: {},
  created() {},
  mounted() {
    this.getAllData();
    DiametergetAll().then((res) => {
      // console.log(res);
      this.DiameterData = res.data.data.pageData;
    });
    CraftgetAll().then((res) => {
      this.CraftData = res.data.data.pageData;
    });
    LengthgetAll().then((res) => {
      // console.log(res);
      this.LengthData = res.data.data.pageData;
    });
    WhatModelgetAll().then((res) => {
      // console.log(res);
      this.WhatModelData = res.data.data.pageData;
    });
    MoldgetAll().then((res) => {
      // console.log(res);
      this.MoldData = res.data.data.pageData;
    });
    OutsidegetAll().then((res) => {
      // console.log(res);
      this.OutsideData = res.data.data.pageData;
    });
    GoodOrBadgetAll().then((res) => {
      // console.log(res);
      this.GoodOrBadData = res.data.data.pageData;
    });
  },
  methods: {
    getdata() {
      LinkagegetAll().then((res) => {
        let pageData = res.data.data.pageData;
        if (this.createform.Mold == "坩埚") {
          this.DiameterData1 = pageData[0].diameter;
          this.CraftData1 = pageData[0].craft;
          this.WhatModelData1 = pageData[0].whatModel;
        }
        if (this.createform.Mold == "接头") {
          this.DiameterData1 = pageData[1].diameter;
          this.CraftData1 = pageData[1].craft;
          this.WhatModelData1 = pageData[1].whatModel;
        }
        if (this.createform.Mold == "电极") {
          this.DiameterData1 = pageData[2].diameter;
          this.CraftData1 = pageData[2].craft;
          this.WhatModelData1 = pageData[2].whatModel;
        }
      });
    },
    getAllData() {
      const params = {
        craft: this.createform.Craft,
        diameter: this.createform.Diameter,
        length: this.createform.Length,
        whatModel: this.createform.WhatModel,
        outside: this.createform.Outside,
        goodOrBad: this.createform.GoodOrBad,
        mold: this.createform.Mold,
        pageSize: this.pageSize,
        currPage: this.currPage,
      };
      console.log(params);
      totalListgettypeAll(params).then((res) => {
        this.tableData = res.data.data.pageData;
        console.log(this.tableData);
        this.total = res.data.data.total;
      });
    },
    qingkong() {
      this.createform.Mold = "";
      this.createform.Craft = "";
      this.createform.WhatModel = "";
      this.createform.Diameter = "";
      this.createform.Outside = "";
      this.createform.GoodOrBad = "";
      this.DiameterData1 = [];
      this.CraftData1 = [];
      this.WhatModelData1 = [];
      this.getAllData();
    },
    deleteOne(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = {
            _id: row._id,
          };
          totalListdeleteType(params).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
            } else {
              this.$message({
                type: "warning",
                message: res.data.message,
              });
            }
            this.getAllData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onSubmit() {
      this.getAllData();
      this.$message({
        message: "查询成功",
        type: "success",
      });
    },
    postinfo() {
      this.$refs.createform.validate((valid) => {
        if (valid) {
          this.CraftData.forEach((element) => {
            if (element.dates == this.createform.Craft) {
              this.createform.Controller = element.group;
            }
          });
          // let floatValue = parseFloat(this.createform.Weight);
          // this.createform.Weight=floatValue
          totalListcreate(this.createform).then((res) => {
            console.log(res);
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "添加成功",
              });
              this.getAllData();
              this.dialogVisible = false;
            } else {
              this.$message({
                type: "warning",
                message: res.data.message,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllData();
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.getAllData();
    },
  },
};
</script>

<style  scoped>
.pagin {
  display: flex;
  justify-content: right;
  padding: 12px 12px 0 0;
}
.pagin  .el-pager .active {
  background-color: $primary !important;
}
</style>
